/// <reference path="jsCoreSite.js" />
/// <reference path="jsUtilMobile.js" />
/// <reference path="jquery-1.9.1.min.js" />

/** Script para generar la busqueda de semaforos autobuses
 * 
 */

var methodSemaforoAutobus = urlServiceCan + "GetSemaforoAutobusList";

$(document).on('pageinit', '#pageDefault', function () {

    var currentTime = new Date();
    var month = currentTime.getMonth() + 1;
    var year = currentTime.getFullYear();
    setOptionValue(month, $("#mes"));
    setOptionValue(year, $("#anio"));

});



$(function () {
    $("#enviarDatos").click(function () {
        var data = {
            ordenar: $("#ordenar").val(),
            mes: $("#mes").val(), 
            anio: $("#anio").val()
        };
        $.mobile.loading('show');

        $.ajax({
            cache: false,
            async: true,
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: methodSemaforoAutobus,
            data: JSON.stringify(data),
            success: successSemaforoAutobus,
            error: function (data, status, error) {
                 $.mobile.loading('hide');    
                 $("#errorPage").empty(); 
                 $("#errorPage").append(data.responseText);
            }
        });


    });
});

 function successSemaforoAutobus(data, status) {

     $.mobile.changePage("#pageDetails");
     $.mobile.loading('hide');
     $("#listaAutobuses").empty();
     $("#metaMes").empty();
     $("#metasVerde").empty();
     $("#metasAmarillo").empty();
     $("#metasRojo").empty();
     $("#porcentajeVerde").empty();
     $("#porcentajeAmarillo").empty();
     $("#porcentajeRojo").empty();
     $("#errorPage").empty();
     $("#panelContent").show();

     var listaAutobuses = null;
     try {
         listaAutobuses = $.parseJSON(data.d);
     }
     catch (err) {
         $("#panelContent").hide();
         $("#errorPage").append('No se encontraron datos con esos parametros');
         return;
        
     }   

    
    var factorAmarillo = 0.0;
    var metaMes = 0.0;
    try {

        metaMes = parseFloat(listaAutobuses[0].Meta);
        factorAmarillo = parseFloat(listaAutobuses[0].FactorAmarillo);
    }
    catch (err) {


    }   


    var valFactorAma = 0.0;
    if (factorAmarillo > 0) {
        valFactorAma = factorAmarillo / 100;
    }
    var etiquetaMetaMes = '';
    var etiquetaVerde = '';
    var etiquetaAmarillo = '';
    var etiquetaRojo = '';
    var etiquetaPorcVerde = '';
    var etiquetaPorcAmarillo = '';
    var etiquetaPorcRojo = '';
    var valorAmarilloDesde = 0;
    var valorAmarilloHasta = 0;
    var valorRojo = 0;
    var cantidadVerde = 0;
    var cantidadAmarillo = 0;
    var cantidadRojo = 0;
    var cantidadTotalRegistros = 0;
    var listString = '';
    var STYLE_CLASS = {
	GREEN : {
	    value: 'ui-btn-inner-greenComponent'
	},
	YELLOW : {
	    value: 'ui-btn-inner-yellowComponent'
	},
	RED : {
	    value: 'ui-btn-inner-redComponent'
	}
    };

    valorAmarilloDesde = metaMes - 0.01;
    valorAmarilloHasta = metaMes - (metaMes * valFactorAma);
    valorAmarilloHasta = valorAmarilloHasta.toFixed(2);
    valorRojo = valorAmarilloHasta - 0.01;

    $.each(listaAutobuses, function (index, value) {
        var claseColor = '';
        var valorRendimiento = parseFloat(this.FactorRendimiento);
        cantidadTotalRegistros += 1;
        switch (true) {


            case valorRendimiento >= metaMes:
                cantidadVerde += 1;
                claseColor = STYLE_CLASS.GREEN.value;
                break;

            case this.FactorRendimiento >= valorAmarilloHasta && this.FactorRendimiento <= valorAmarilloDesde:
                cantidadAmarillo += 1;
                claseColor = STYLE_CLASS.YELLOW.value;
                break;

            case this.FactorRendimiento <= valorRojo:
                cantidadRojo += 1;
                claseColor = STYLE_CLASS.RED.value;
                break;

            default:
                console.log('Sin color');
        }

        listString += '<div data-role="collapsible" class="' + claseColor + '">';
        listString += '<h2>' + this.Autobus + '<span class="ui-li-aside">' + this.FactorRendimiento + '</span></h2>';
        listString += '<ul data-role="listview" data-divider-theme="d" data-icon="false">';
        listString += '<li><a href="#" >Autobus</a><span class="ui-li-aside">' + this.Autobus + '</span></li>';
        listString += '<li><a href="#" >Factor de Rendimiento</a><span class="ui-li-aside">' + this.FactorRendimiento + '</span></li>';
        listString += '<li><a href="#" >Litros</a><span class="ui-li-aside">' + this.Litros + '</span></li>';
        listString += '<li><a href="#" >Kilometros</a><span class="ui-li-aside">' + this.Kilometros + '</span></li>';
        listString += '</ul> </div>'


    });


    etiquetaMetaMes = 'Meta del mes de ' + $("#mes option:selected").text() + ' de ' + $("#anio option:selected").text() + ': ' + metaMes;
    etiquetaVerde = 'Factor Rendimiento >= ' + metaMes;
    etiquetaAmarillo = 'Factor Rendimiento Entre ' + valorAmarilloDesde + ' y ' + valorAmarilloHasta;
    etiquetaRojo = 'Factor Rendimiento <= ' + valorRojo;

    etiquetaPorcVerde = percentInteger(cantidadTotalRegistros, cantidadVerde, true) + '(' + cantidadVerde + ')';
    etiquetaPorcAmarillo = percentInteger(cantidadTotalRegistros, cantidadAmarillo, true) + '(' + cantidadAmarillo + ')';
    etiquetaPorcRojo = percentInteger(cantidadTotalRegistros, cantidadRojo, true) + '(' + cantidadRojo + ')';

    $("#metaMes").append(etiquetaMetaMes);
    $("#metasVerde").append(etiquetaVerde);
    $("#metasAmarillo").append(etiquetaAmarillo);
    $("#metasRojo").append(etiquetaRojo);
    $("#porcentajeVerde").append(etiquetaPorcVerde);
    $("#porcentajeAmarillo").append(etiquetaPorcAmarillo);
    $("#porcentajeRojo").append(etiquetaPorcRojo);

    $("#listaAutobuses").append(listString);
    $("#listaAutobuses").collapsibleset("refresh");

    $("#listaAutobuses ul").each(function (i) {
        $(this).listview();
    });




    //appending to the div
    //$('#ListaAutobuses').html(listString);

    // refreshing the list to apply styles
    //$('#ListaAutobuses ul').listview();
}


